<script>
import {getView} from "../../utils/webutil";

export default {
    name: "ResourceCard",
    data() {
        return {}
    },

    props: {
        value: {
            type: Object,
            default() {
                return {
                    id:0,
                    title: '我的系统',
                    fileType: 'doc',
                    summary: 'HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时',
                    uploadTime: '2021-12-16',
                    tag: '11,232,222'
                }
            }
        }
    },
    methods: {
        getUrl(type) {
            return getView(type);
        },
        editResource(){
            this.$router.push({path:"/share", query:{id:this.value.id}})
        },
        getTagArray(tags){
            return JSON.parse(tags)
        },
        toDetail(){
            this.$router.push('/res/detail/'+this.value.id)
        }
    },
    mounted() {
    }
}
</script>


<template>
    <div @click="toDetail"  class="flex column space-between flex-start align-center card">
        <div style="margin-top: 10px">
            <img style="width: 100px;border-radius: 15px" :src="getUrl(value.fileType)" alt="">
        </div>
        <a class="title">{{value.title}}</a>
        <div class="flex row center align-center" style="margin-bottom: 10px" >
            <img style="width: 20px;"  src="../../assets/img/star.svg" alt="">
            <span>{{value.score}}</span>
            <el-divider direction="vertical"/>
            <img style="width: 20px;"  src="../../assets/img/download.svg" alt="">
            <span>{{value.downloadCount}}</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>


.title {
    line-height: 23px;
    font-size: 12pt;
    color: #555666;
    font-weight: 500;
}
.card{
    width: 140px;
    height: 183px;
    margin:2px 2px;
    background: #f1f1f1;
    border-radius: 10px;
}
.card:hover{
    background: #e1e1e1;
}
</style>

